<!DOCTYPE html>
<html>
<head>
    <title>{$site.title} - {:lang('Member center')} - {:lang('Register')}</title>

    {include file="user/common/head"}

    <style>
        .disabled {
            color: #a7a7a7;
            cursor: not-allowed;
        }
        .disabled:hover {
            color: #a7a7a7;
        }
        .login-page {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .login-card-body .title {
            margin-top: 10px;
            font-size: 16px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 24px;
        }
        .login-card-body .title .line {
            height: 2px;
            width: 32px;
            margin: 0 auto;
            margin-top: 8px;
        }
        .login-card-body .input-group {
            margin-bottom: 16px;
        }
        .form-group label {
            margin-bottom: 8px;
        }
        .card-body {
            padding-left: 28px;
            padding-right: 28px;
        }
    </style>
</head>
<body>
{include file="user/common/menu"}

<div class="login-page">
    <div class="login-box">
        <div class="card">
            <div class="card-body login-card-body">
                <form action="" method="post" class="frm-operate">
                    <div class="title">
                        <span>{:__('Member register')}</span>
                        <div class="line bg-primary"></div>
                    </div>
                    <div class="form-group">
                        <label>{:lang('Username')}</label>
                        <div>
                            <input type="text" class="form-control" placeholder="{:lang('Support 3~30 Chinese characters, letters, numbers, dashes, underscores')}" name="row[username]" data-rule="required ">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{:lang('Password')}</label>
                        <div>
                            <input type="password" class="form-control" placeholder="{:lang('Password')}" name="row[password]" data-rule="required ">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{:lang('Confirm password')}</label>
                        <div>
                            <input type="password" class="form-control" placeholder="{:lang('Confirm password')}" name="row[cfm_password]" data-rule="required ">
                        </div>
                    </div>


                    {if $site.register_captcha==3}
                    <div class="form-group">
                        <label>{:lang('Mobile')}</label>
                        <div><input type="text" class="form-control" placeholder="{:lang('Mobile')}" name="row[mobile]" data-rule="required"></div>
                    </div>
                    <div class="form-group">
                        <div>
                            <div class="input-group m-0">
                                <input type="text" class="form-control" placeholder="{:lang('Phone verification code')}" name="row[mobile_code]" data-rule="required">
                                <div class="input-group-append">
                                    <div class="input-group-text"><a href="#" class="send_sms">{:lang('Get verification code')}</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {elseif $site.register_captcha==2}
                    <div class="form-group">
                        <label>{:lang('Email')}</label>
                        <div>
                            <input type="email" class="form-control" placeholder="{:lang('Email')}" name="row[email]" data-rule="required ">
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <div class="input-group m-0">
                                <input type="text" class="form-control" placeholder="{:lang('Email verification code')}" name="row[email_code]" data-rule="required">
                                <div class="input-group-append">
                                    <div class="input-group-text"><a href="#" class="send_email">{:lang('Get verification code')}</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {else /}
                    <div class="form-group">
                        <div>
                            <div class="input-group m-0">
                                <input type="text" class="form-control" placeholder="{:lang('verification code')}" name="row[code]" data-rule="required ">
                                <div class="input-group-append">
                                    <a href="#" class="refresh"><img src="{:url('/user.user/verify')}" style="width: 146px" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/if}

<!--                    <div class="row mb-3">-->
<!--                        <div class="col-12">-->
<!--                            <div class="icheck-primary d-flex align-items-center">-->
<!--                                <input type="checkbox" id="agreement" data-rule="checked" data-msg="{:lang('Please agree to the agreement')}">-->
<!--                                <label for="agreement" class="text-secondary text-sm m-0 ml-2">-->
<!--                                    {:lang('Agree')} 《<a href="#">注册协议</a>》-->
<!--                                </label>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="social-auth-links text-center mb-4" style="margin-top: 28px">
                        <input type="submit" class="btn btn-block btn-primary btn-submit" value="{:lang('Register')}" />
                    </div>
                </form>

                <p class="text-center"><a href="{:url('/user.user/login')}">{:lang('Back to login')}</a></p>
            </div>
        </div>
    </div>
</div>

{include file="user/common/footer"}
<script>
    require(['jquery','bootstrap','layer','Form'], function ($,undefined,layer,Form) {

        // 刷新验证码
        $('.refresh').click(function (e) {
            e.preventDefault();
            $(this).find('img').attr('src',"{:url('/user.user/verify')}?r="+Math.random());
        });

        //  邮箱验证码
        $('.send_email').click(function (e) {
            e.preventDefault();
            if ($('.send_email').is('.disabled')) {
                return false;
            }
            var i = 60;
            var val = $('input[name="row[email]"]').val();
            if (val.length<=0) {
                layer.msg("{:lang('Please fill in the email address')}");
                return false;
            }
            if (!(new RegExp(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)).test(val)) {
                layer.msg("{:lang('Incorrect email address format')}");
                return false;
            }
            $('.send_email').addClass('disabled');
            $.get("{:url('/user.user/sendems')}?email="+val+'&event=register',function(data, status){
                if (data.code==200) {
                    layer.msg(data.msg);
                    var myint = setInterval(function(){
                        if (i==0) {
                            $('.send_email').removeClass('disabled');
                            $('.send_email').html('{:lang('Resend')}');
                            clearInterval(myint);
                            return false;
                        }
                        $('.send_email').html('{:lang('Resend')} '+(--i));
                    }, 1000);
                } else {
                    $('.send_email').removeClass('disabled');
                    layer.msg(data.msg);
                }
            });
        });

        // 短信验证码
        $('.send_sms').click(function (e) {
            e.preventDefault();
            if ($('.send_sms').is('.disabled')) {
                return false;
            }
            var i = 60;
            var val = $('input[name="row[mobile]"]').val();
            if (val.length<=0) {
                layer.msg("{:lang('Please fill in your phone number')}");
                return false;
            }
            if (!(new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/)).test(val)) {
                layer.msg("{:lang('Phone number format is not correct')}");
                return false;
            }
            $('.send_sms').addClass('disabled');
            $.get("{:url('/user.user/send')}?mobile="+val+'&event=register',function(data, status){
                if (data.code==200) {
                    layer.msg(data.msg);
                    var myint = setInterval(function(){
                        if (i==0) {
                            $('.send_sms').removeClass('disabled');
                            $('.send_sms').html('{:lang('Resend')}');
                            clearInterval(myint);
                            return false;
                        }
                        $('.send_sms').html('{:lang('Resend')} '+(--i));
                    }, 1000);
                } else {
                    $('.send_sms').removeClass('disabled');
                    layer.msg(data.msg);
                }
            });
        });

        Form.api.init({
            success:function (data, response) {
                layer.msg(response.msg,{time:1000},function (e) {
                    window.location.href = data.url;
                });
                return false;
            },
            error: function (res) {
                if (res.code==-1001) {
                    $('.refresh').click();
                }
            }
        });
    })
</script>

</body>
</html>